<template>
  <!-- 头 -->
  <div class="header">
    <van-nav-bar
      title="个人中心"
      :right-text="buttonLogout"
      @click-right="onClickRight"
    />
  </div>
  <!-- 主体 -->
  <div class="body">
    <!-- 登录框 -->
    <div v-if="buttonLogout == ''">
      <van-tabs v-model:active="active">
        <van-tab title="登录">
          <van-form @submit="onSubmitLogin">
            <van-cell-group inset>
              <van-field
                v-model="username"
                name="邮箱"
                label="邮箱"
                placeholder="邮箱"
                :rules="[{ required: true, message: '请填写邮箱' }]"
              />
              <van-field
                v-model="password"
                type="password"
                name="密码"
                label="密码"
                placeholder="密码"
                :rules="[{ required: true, message: '请填写密码' }]"
              />
            </van-cell-group>
            <div style="margin: 16px">
              <van-button round block type="primary" native-type="submit" color="#24657D">
                提交
              </van-button>
            </div>
          </van-form>
        </van-tab>
        <van-tab title="注册">
          <van-form @submit="onSubmitRegister">
            <van-cell-group inset>
              <van-field
                v-model="username"
                name="邮箱"
                label="邮箱"
                placeholder="邮箱"
                :rules="[{ required: true, message: '请填写邮箱' }]"
              />
              <van-field
                v-model="password"
                type="password"
                name="密码"
                label="密码"
                placeholder="密码"
                :rules="[{ required: true, message: '请填写密码' }]"
              />
              <van-field
                v-model="password_again"
                type="password"
                name="确认密码"
                label="确认密码"
                placeholder="确认密码"
                :rules="[{ required: true, message: '请填写密码' }]"
              />
              <van-field
                v-model="smsCode"
                center
                clearable
                label="邮箱验证码"
                placeholder="请输入邮箱验证码"
                :rules="[{ required: true, message: '请填写验证码' }]"
              >
                <template #button>
                  <van-button
                    size="small"
                    type="primary"
                    @click="getSmsCode"
                    :disabled="buttonStatus"
                    color="#24657D"
                    >{{ buttonWord }}</van-button
                  >
                </template>
              </van-field>
            </van-cell-group>

            <div style="margin: 16px">
              <van-button round block type="primary" native-type="submit" color="#24657D">
                提交
              </van-button>
            </div>
          </van-form>
        </van-tab>
      </van-tabs>
    </div>
    <!--  -->
    <div v-else class="comments">
      <!-- 头像 -->
      <div class="header-logo">
        <img :src="figureurl" class="user_logo" />
      </div>
      <!-- 留言框 -->
      <div class="mess">
        <textarea class="weui-textarea" placeholder="请输入留言" v-model="textValue" />
        <van-button type="primary" block color="#24657D" @click="putMessageExec"
          >提交</van-button
        >
      </div>
      <!-- 留言列表 -->
      <div class="vcards" v-for="(item, index) in messageList" :key="index">
        <div class="vcard">
          <img class="vimg" :src="item.figureurl_qq" />
          <div class="vh">
            <div class="vhead">
              <span class="vnick">{{ item.nickname }}</span>
            </div>
            <div class="vmeta">
              <span class="vtime">{{ item.addtime }}</span>
              <!-- <span class="vat" @click="openModal('留言回复',item.id)">回复</span> -->
            </div>
            <div class="vcontent">
              <p v-html="item.content"></p>
            </div>
            <div class="vreply-wrapper"></div>
            <div class="vquote" v-for="(value, key) in item.com_two" :key="key">
              <div class="vcard">
                <img class="vimg" :src="value.figureurl_qq" />
                <div class="vh">
                  <div class="vhead">
                    <span class="vnick"
                      >{{ value.nickname }} 回复 {{ value.reply_nickname }}</span
                    >
                  </div>
                  <div class="vmeta">
                    <span class="vtime">{{ value.addtime }}</span>
                    <!-- <span class="vat" @click="openModal('留言回复',value.id)">回复</span> -->
                  </div>
                  <div class="vcontent">
                    <p v-html="value.content"></p>
                  </div>
                  <div class="vreply-wrapper"></div>
                  <div class="vquote"></div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- navbar -->
  <div class="footer">
    <Menu @getPersonalData="getPersonalData" ref="MenuRef" activeDefine="3" />
  </div>
</template>

<script lang="ts" setup>
// 引入子组件
import Menu from "/@/components/phone/Menu.vue";
import { ref, onMounted, nextTick } from "vue";
import {
  // 这里是方法
  putMessageExec,
  onClickRight,
  getSmsCode,
  getPersonalData,
  getUserSessionData,
  onSubmitLogin,
  onSubmitRegister,
  Mounted,
  // 这里是变量
  // active,
  messageList,
  username,
  password,
  password_again,
  smsCode,
  buttonStatus,
  buttonWord,
  buttonLogout,
  figureurl,
  textValue,
} from "/@/assets/js/phone/personal";

// =====================================================
// 调用生命周期函数
const { MenuRef, active } = Mounted();
// import {
//   PropType,
//   ref,
//   watch,
//   reactive,
//   toRefs,
//   provide,
//   inject,
//   onBeforeMount, // 在组件挂载之前执行的函数
//   onMounted,
//   onBeforeUpdate, // 在组件修改之前执行的函数
//   onUpdated,
//   onBeforeUnmount, // 在组件卸载之前执行的函数
//   onUnmounted,
//   nextTick,
// } from "vue";
// // 引入路由
// import { useRouter, useRoute } from "vue-router";
// // 引入公共js文件
// import utils from "/@/assets/js/public/function";
// // 引入子组件
// import Menu from "/@/components/phone/Menu.vue";
// // api 接口文件
// import {
//   getUserSession,
//   getEmailCode,
//   accountLogin,
//   getMessageList,
//   layout,
//   putMessage,
// } from "/@/api/phone/index";
// import { common, userinfo } from "/@/hooks/common";
// import { Toast } from "vant";

// // =============================================================================
// // 实例化路由
// const router = useRouter();
// const route = useRoute();

// /**
//  * @name: 声明data
//  * @author: camellia
//  * @email: guanchao_gc@qq.com
//  * @date: 2022-07-18
//  */
// const data = reactive({
//   // 留言列表
//   messageList: Array<any>(),
//   // 标签索引
//   active: <Number>0,
//   // 用户名（邮箱）
//   username: <String>"",
//   // 密码
//   password: <String>"",
//   // 密码
//   password_again: <String>"",
//   // 验证码
//   smsCode: <String>"",
//   // 按钮状态
//   buttonStatus: <Boolean>false,
//   // 按钮文字
//   buttonWord: <String>"发送验证码",
//   // 按钮倒计时
//   buttonNumber: <number>60,
//   // 登出按钮显示文字
//   buttonLogout: <String>"",
//   // 头像链接
//   figureurl: <String>userinfo.figureurl,
//   // 文本域输入值
//   textValue: <String>"",
// });

// /**
//  * @name: 将data绑定值dataRef
//  * @author: camellia
//  * @email: guanchao_gc@qq.com
//  * @date: 2022-07-10
//  */
// const {
//   messageList,
//   active,
//   username,
//   password,
//   password_again,
//   smsCode,
//   buttonStatus,
//   buttonWord,
//   buttonLogout,
//   figureurl,
//   textValue,
// } = toRefs(data);

// /**
//  * @name: 监听登录状态变化
//  * @author: camellia
//  * @email: guanchao_gc@qq.com
//  * @date: 2021-01-20
//  */
// watch(
//   () => userinfo.userid,
//   () => {
//     data.buttonLogout = userinfo.userid ? "登出" : "";
//     data.figureurl = userinfo.figureurl ? userinfo.figureurl : "";
//   }
// );

// // ===============================================================================
// // 子组件相关
// // 子组件ref（TypeScript语法）
// const MenuRef = ref<InstanceType<typeof Menu>>();

// // ===============================================================================
// // 方法

// /**
//  * @name: 留言
//  * @author: camellia
//  * @email: guanchao_gc@qq.com
//  * @date: 2022-07-18
//  */
// const putMessageExec = () => {
//   if (data.textValue == "") {
//     Toast("请填写留言内容！");
//     return;
//   }
//   Toast.loading({
//     message: "加载中...",
//     forbidClick: true,
//   });
//   let param = { content: data.textValue };
//   putMessage(param).then(function (response: any) {
//     console.log(response);
//     data.textValue = "";
//     utils.sleep(1000).then(() => {
//       // 这里写sleep之后需要去做的事情
//       // 回到滚动条刷新前位置
//       Toast.clear();
//     });
//     Toast(response.msg);
//   }); //*/
// };

// /**
//  * @name: 点击登出按钮
//  * @author: camellia
//  * @email: guanchao_gc@qq.com
//  * @date: 2022-07-18
//  */
// const onClickRight = () => {
//   let param = {};
//   layout(param).then(function (resp: any) {
//     userinfo.userid = "";
//     userinfo.figureurl = "";
//     userinfo.nickname = "";
//     userinfo.email = "";
//   });
// };

// /**
//  * @name: 获取 邮箱 验证码
//  * @author: camellia
//  * @email: guanchao_gc@qq.com
//  * @date: 2022-07-18
//  */
// const getSmsCode = () => {
//   if (data.username == "") {
//     Toast("请输入邮箱");
//     return;
//   }
//   let param = { email: data.username };
//   data.buttonStatus = true;
//   getEmailCode(param).then(function (response: any) {
//     console.log(response);
//     var timer = setInterval(function () {
//       data.buttonNumber -= 1;
//       data.buttonWord = "发送验证码 ( " + data.buttonNumber + " ) ";
//       if (data.buttonNumber == 0) {
//         data.buttonWord = "发送验证码";
//         data.buttonStatus = false;
//         data.buttonNumber = 60;
//         clearInterval(timer);
//       }
//     }, 1000);
//   });
// };

// /**
//  * @name: 子组件向父组件抛出的方法
//  * @author: camellia
//  * @email: guanchao_gc@qq.com
//  * @date: 2022-07-18
//  */
// const getPersonalData = (response: any): void => {};

// /**
//  * @name: 获取用户登录信息
//  * @author: camellia
//  * @email: guanchao_gc@qq.com
//  * @date: 2022-07-18
//  */
// const getUserSessionData = (): void => {
//   let param = {};
//   getUserSession(param).then(function (response: any) {
//     userinfo.userid = response.userid;
//     userinfo.figureurl = response.figureurl;
//     userinfo.nickname = response.nickname;
//     userinfo.email = response.email;
//     // 如果登陆了，获取一下留言列表
//     if (userinfo.userid) {
//       Toast.loading({
//         message: "加载中...",
//         forbidClick: true,
//       });
//       getMessageList(param).then(function (resp: any) {
//         data.messageList = resp.messageList;
//         utils.sleep(1000).then(() => {
//           // 这里写sleep之后需要去做的事情
//           // 回到滚动条刷新前位置
//           Toast.clear();
//         });
//       });
//     }
//   });
// };

// /**
//  * @name: 登录
//  * @author: camellia
//  * @email: guanchao_gc@qq.com
//  * @date: 2022-07-18
//  */
// const onSubmitLogin = (): void => {
//   if (data.username == "" || data.password == "") {
//     Toast("请输入完整信息！");
//     return;
//   }
//   Toast.loading({
//     message: "加载中...",
//     forbidClick: true,
//   });
//   let params = { email: data.username, password: data.password, sign: "login" };
//   let param = { params: utils.encryptCode(params) };
//   accountLogin(param).then(function (response: any) {
//     userinfo.userid = response.userid;
//     userinfo.figureurl = response.figureurl;
//     userinfo.nickname = response.nickname;
//     userinfo.email = response.email;
//     getMessageList(param).then(function (resp: any) {
//       data.messageList = resp.messageList;
//     });
//     utils.sleep(1000).then(() => {
//       // 这里写sleep之后需要去做的事情
//       Toast.clear();
//     });
//   });
// };

// /**
//  * @name: 注册
//  * @author: camellia
//  * @email: guanchao_gc@qq.com
//  * @date: 2022-07-18
//  */
// const onSubmitRegister = (): void => {
//   if (
//     data.username == "" ||
//     data.password == "" ||
//     data.password_again == "" ||
//     data.smsCode == ""
//   ) {
//     Toast("请输入完整信息！");
//     return;
//   }
//   if (data.password != data.password_again) {
//     Toast("两次输入密码不一致！");
//     return;
//   }
//   Toast.loading({
//     message: "加载中...",
//     forbidClick: true,
//   });
//   let params = {
//     email: data.username,
//     password: data.password,
//     sign: "register",
//     emailCode: data.smsCode,
//   };
//   let param = { params: utils.encryptCode(params) };
//   accountLogin(param).then(function (response: any) {
//     userinfo.userid = response.userid;
//     userinfo.figureurl = response.figureurl;
//     userinfo.nickname = response.nickname;
//     userinfo.email = response.email;
//     utils.sleep(1000).then(() => {
//       // 这里写sleep之后需要去做的事情
//       Toast.clear();
//     });
//   });
// };

// /**
//  * @name: 生命周期---页面挂载完成
//  * @author: camellia
//  * @email: guanchao_gc@qq.com
//  * @date: 2022-07-18
//  */
// const mounted = onMounted(() => {
//   // 执行子组件方法
//   MenuRef.value?.getPersonalData();
// });

// // =================================================================
// getUserSessionData();
</script>

<style scoped lang="scss">
@import "/@/assets/css/phone/personal.scss";
</style>
